<template>
	<view class="content">
		<view class="app-title ac">
			<view class="fl" @click="back">
				<image class="back" src="/static/img/back.png"></image>
			</view>运营周/月报详情
		</view>

		<view class="fault-status">选择线路 <view class="fr" @click="show_picker=true">{{this.search_list.line == '' ? '请选择 ' : this.search_list.line+' '}}<image class="arrow" src="/static/img/arrow.png"></image></view></view>

		<view class="fault-content">
			<view><b>报警数量统计</b></view>
			<view class="type">统计时间：{{search_list.id}}</view>
			<table id="table" border='1' padding='0' cellpadding='0' style='width: 100%;' cellspacing='0'>
				<thead>
					<tr style='background-color: #EDEDED;'>
						<td style="width:130px;">
							<table width="100%" class='innerTable' height="100%" border="0" cellpadding="0"
								cellspacing="0">
								<view class="line"></view>
								<tr>
									<td id="td1"></td>
									<td>报警级别</td>
								</tr>

								<tr>
									<td>报警时间</td>
									<td id="td2"></td>
								</tr>

							</table>
						</td>
						<td style="width:60px;">一级报警</td>
						<td style="width:60px;">二级报警</td>
						<td class="table_td">三级报警</td>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(item,index) in report" :key="index">
						<td class="table_td">{{item.day}}</td>
						<td class="table_td">{{item.one}}</td>
						<td class="table_td">{{item.two}}</td>
						<td class="table_td">{{item.three}}</td>
					</tr>
				</tbody>
			</table>
		</view>

		<view class="fault-content">
			<view><b>重大报警列表</b></view>
			<view class="type">统计时间：{{search_list.id}}</view>
			<table id="table" border='1'  cellpadding='0' style='width: 100%;' cellspacing='0'>
				<thead style='background-color: #EDEDED;'>
					<tr>
						<th rowspan="2" style='width: 12%;'>序号</th>
						<th rowspan="2" style='width: 15%;'>位置</th>
						<th rowspan="2" style='width: 30%;'>发生时间</th>
						<th colspan="2">处理信息</th>
					</tr>
					<tr>
						<th>描述</th>
						<th>确认人数</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(item,index) in list" :key="index">
						<td class="table_td">1</td>
						<td class="table_td">万年场</td>
						<td class="table_td">2021-08-13 17:04:12</td>
						<td class="table_td">文字描述.....</td>
						<td class="table_td">王喵咪</td>
					</tr>
					<!-- <tr>
						<td class="table_td">1</td>
						<td class="table_td">万年场</td>
						<td class="table_td">2021-08-13 17:04:12</td>
						<td class="table_td">文字描述.....</td>
						<td class="table_td">王喵咪</td>
					</tr> -->
				</tbody>
			</table>
		</view>
		
		<view class="full full2" v-show="show_picker"></view>
		<u-select v-model="show_picker" :list="options" label-name="text" @confirm="confirm" @cancel="cancel"></u-select>
		<!-- <Picker v-show="show_picker" show-toolbar :columns="options" @confirm="confirm" @cancel="cancel"></Picker> -->
	</view>
</template>

<script>
	// import { Picker } from 'vant'
	export default {
		// components:{Picker},
		data() {
			return {
				options : [],
				report : [],
				list: [],
				search_list : {
					id:'',
					line:'',
					page : 0
				},
				show_picker : false,
				flog:true
			}
		},
		onLoad(options){
			this.search_list.id = options.id;
		},
		onReachBottom() {
			if(!this.flog) return uni.showToast({title:'已无最新数据',icon:'none'});
			this.initList();
		},
		created() {
			this.initLine();
		},
		methods: {
			back() {
				uni.navigateBack();
			},
			initLine() {
				this.fetch('GET',this.baseUrl()+'/ReportController/lineComboBox',{}).then((res)=>{
					if(res.returnCode == 1) this.options = res.data;
				})
			},
			cancel() {
				this.show_picker = false;
			},
			confirm(value,index) {
				this.search_list.line = value[0].label;
				this.getReport();
				this.initList();
				this.cancel();
			},
			getReport() {
				this.fetch('GET',this.baseUrl()+'/ReportController/queryReportDetail',{id:this.search_list.id,line:this.search_list.line},true).then((res)=>{
					if(res.returnCode == 1) this.report = res.data;
				})
			},
			initList() {
				this.fetch('GET',this.baseUrl()+'/ReportController/querySeriousList',this.search_list,true).then((res)=>{
					if(res.returnCode == 1) {
						this.list = this.list.concat(res.data.content);
						this.search_list.Page++;
						if(res.data.length != 10) this.flog = false;
					}
				})
			}
		}
	}
</script>

<style scoped>
	.innerTable {
		position: relative;
	}
	
	table{
	}
	tr,th,td{
		text-align: center;
	}
	tbody{		
		border-color: #F1F1F1;
	}
	thead{
		border-color: #fff;
	}

	.line {
		left: 0;
		right: 0;
		top: 50%;
		height: 2px;
		width: 100%;
		background-color: #fff;
		position: absolute;
		transform: rotate(14deg);
	}

	.fault-status {
		line-height: 54px;
		background: #FFFFFF;
		box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.05);
		padding: 0 16px;
		margin-bottom: 16px;
	}

	.arrow {
		width: 7px;
		height: 14px;
		vertical-align: middle;
	}

	.fault-content {
		width: 91.5%;
		background: #FFFFFF;
		box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.05), 2px 2px 4px rgba(0, 0, 0, 0.05);
		border-radius: 6px;
		margin: 0 auto;
		margin-bottom: 16px;
		padding: 16px;
		font-size: 14px;
	}

	.fault-content>view:first-child {
		font-size: 16px;
		margin-bottom: 6px;
	}

	.fault-content>.type {
		margin: 10px 0;
	}
</style>
